<template>
    <div class="van-search">
    <van-search v-model="value" placeholder="输入商品" show-action  class="search" shape="round">
    <template #action>
    <div @click="onClickButton" class="search-action">搜索</div>
  </template>
</van-search>
  </div>
  <main>
    <div class="history">
      <h3>搜索历史</h3> 
      <p><van-icon name="delete-o" /><span>清除历史</span></p>
    </div>
    <div class="modelhistory">
      <div><span>小爱同学</span></div>
      <div><span>小米10至尊版</span></div>
      <div><span>are you ok</span></div>
    </div>
    <div class="hotsearch">
      <h3>热门搜索</h3>
     <div><span>小米10 pro</span> <span>耳机</span><van-tag type="primary" class="primary">上新</van-tag></div>
     <div><span>小米10 </span> <span>小爱同学</span></div>
     <div><span>手机</span><van-tag type="danger" class="danger">热销</van-tag> <span>电视</span></div>
    </div>
  </main>
  <div>
    <van-card v-for="(index,items) in twolist" :key="index" 
  num="2"
  price="2.00"
  desc="描述信息"
  :title="index[items]"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
/>
  </div>
</template>

<script>
import {ref} from 'vue'
import { Toast,Search,Icon,Tag ,Card} from 'vant';
import { getHomeData } from '../api/home';
export default {
  name: 'homeserch',
  setup(){
    const value = ref('');
    const list=ref([])
    const twolist=ref([])
    const onSearch = (val) => Toast(val); 
    const onClickButton =()=>{
     const newlist=[] 
     for(let key in list._rawValue){
      newlist.push(list._rawValue[key].title)
     }
     if(value.value==''||value.value==null){
      return
     }else{ twolist.value.push(newlist.filter(item=>item.indexOf(value.value)>=0))
    return 
  }
    
     
    }
   
    async function fff(){
      const result=await getHomeData()
      const{items}=result
      list.value.push(...items.list)
    }
    fff()
    return { 
            value,
            onSearch,
            onClickButton, 
            getHomeData,
            list,
            twolist,
    
           
           
           
          };
        
  },

 
 
  
}
</script>

<style lang="less" scoped>
 .van-search{
    margin-top: 20px;
    background: #eee;
 }
 .van-search .search{
  width: 400px;
  height: 50px;
  
 }
 .search-action{
  color: pink;
  font-size: 18px;
 }
 .history{
  display: flex;
  justify-content: space-around;
  align-items: center;
 }
 .modelhistory{
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-around;
 }
 .modelhistory div{
  width: 110px;
  height: 40px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-weight:bold;
 }
 .hotsearch{
  position: relative;
 }
 .hotsearch div{
  margin: 20px auto;
  width: 300px;
  display: flex;
  justify-content: space-between;
 }
 .hotsearch div span{
  font-size: 20px;
  
 }
 .danger{
  position: absolute;
  left: 85px;
 }
 .primary{
  position: absolute;
  left: 210px;
  top:90px;
 }
 
</style>
